<template>
  <div class="examples">
    <div style="width: 100%; height: 100%" id="player"></div>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, ref } from "vue";
import { useCloudStore } from "@/stores/cloudStore.ts";

const CloudStore = useCloudStore();

// 初始化 base里面会调用
const initViewer = () => {
  let aircityApi = null;
  const apiOptions = {
    onEvent: onEvent,
    onLog: (e) => {},
    useColorLog: false, //仅用于SDK测试页面，二次开发请设置为false
  };
  const options = {
    domId: "player",
    apiOptions: apiOptions,
    showMarker: true,
    showStartupInfo: true,
  };

  const aircityPlayer = new (window as any).AirCityPlayer(
    "127.0.0.1:8099",
    options,
  );
  aircityApi = aircityPlayer.getAPI();
};
const onEvent = async (data) => {
  let { eventtype, MouseClickPoint, Id, ObjectID, Type, PropertyName } = data;
  //获取相机视角
  let o = await __g.camera.get();
  if (eventtype == "LeftMouseButtonClick") {
    console.log(data, o.camera);
    await CloudStore.setLeftClickData({
      ...data,
      camera: o.camera,
    });
  }
};

onMounted(() => {
  nextTick(() => {
    initViewer();
  });
});
</script>

<style scoped>
.examples {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f7f8fa;
}
</style>
